window.onload=function(){
	// body...
	window.scrollTo(0,0);
	var oLis=document.getElementById('lis');
	var lies=oLis.getElementsByTagName('li');
	var oDivs=document.getElementById('divs');
	var ules=oDivs.getElementsByTagName('ul');
	if(lies.length!=ules.length){
		return;
	}
	for (var i = 0; i < lies.length; i++) {
		lies[i].index=i;
		lies[i].onclick=function(){
			//alert(this.index);
			for (var j = 0; j < lies.length; j++) {
				lies[j].className="";
				ules[j].className="hid";
			}
			this.className="selected";
			ules[this.index].className="test";
	    }
	}
    var num=0;
    var myDirleft=document.getElementById('dir-left');
    var myDirright=document.getElementById('dir-right');
    var myPerson=document.getElementById('person');
    var myPersondivs=myPerson.getElementsByTagName('div');
    var myBg=document.getElementById('bg');
    var myBgdivs=myBg.getElementsByTagName('div');
    myDirright.onclick=function(){
    	num++;
    	if(num>=myBgdivs.length){
    		num=0;
    	}
    	for (var i = 0; i < myBgdivs.length; i++) {
    		myBgdivs[i].className="hidden";
    		myPersondivs[i].className="hide";
    	}
    	myBgdivs[num].className="select";
    	myPersondivs[num].className="on";
    }
    myDirleft.onclick=function(){
       num--;
       if(num<=-1){
    		num=6;
    	}
    	for (var i = 0; i < myBgdivs.length; i++) {
    		myBgdivs[i].className="hidden";
    		myPersondivs[i].className="hide";
    	}
    	myBgdivs[num].className="select";
    	myPersondivs[num].className="on";
    }
    var mymod=document.getElementById('mod');
    var closemod=document.getElementById('close');
    var openmod=document.getElementById('control-mod');
    closemod.onclick=function(){
   	    mymod.style.display="none";
    }
    openmod.onclick=function(){
        mymod.style.display="block";
        window.scrollTo(0,4200);
    }
}